| refs 获取元素位置 | 您所在的位置：网站首页 › vue 获取元素坐标 › refs 获取元素位置 |
refs 获取元素位置
先说实现的逻辑（针对操作逻辑对应的事件讲解）：
onmousedown(鼠标按下事件)：
重新获取操作盒子的大小，以及坐标（考虑到客户有可能变更浏览器大小的情况）。 获取操作盒子顶部距离 获取操作盒子左边距离 获取操作盒子的高度 获取操作盒子的宽度鼠标按下获取到按下的item数据，所在item的坐标，（让随鼠标移动的临时dom所在鼠标的位置完全对应上按下时的位置，用户体验像真复制出来的一样） 获取按下时数组的index，要删除的位置 鼠标点击时的顶部距离 = 鼠标距离浏览器的顶部的高度event.clientY + 浏览器滚动条隐藏的高度document.documentElement.scrollTop 鼠标点击时的左边距离 = 鼠标距离浏览器的左边的高度event.clientX + 浏览器滚动条隐藏的距离document.documentElement.scrollLeft item的左边距离 = 鼠标点击时的左边距离 - 获取操作盒子左边距离 item的顶部距离 = （鼠标点击时的顶部距离 - 获取操作盒子顶部距离）% （每个item的高度+边距（我固定了位置这里设置为88，不固定的话可另外计算））赋值给一个随鼠标移动的临时dom上，先不显示（因为点击是可打开编辑的，移动时再显示） onmousermove(鼠标移动时的事件): 判断临时的dom是否有数据，有数据的时候进行移动，显示出来 设置临时dom的top = 鼠标顶部位置event.clientY - 按下时获取到的item的顶部距离 + ‘px’（因为显示的就是距离浏览器窗口坐标，所以不用加上滚动条隐藏的位置） 设置临时dom的left = 鼠标左边位置event.clientX - 按下时获取到的item的左边距离 + ‘px’ 获取鼠标移动到的index位置 = （（鼠标获取到的顶部距离+滚动条隐藏的距离） - 获取操作盒子顶部距离）/ （每个item的高度+边距（我固定了位置这里设置为88，不固定的话可另外计算））四舍五入取整 |
【本文地址】
公司简介
联系我们